{% extends 'base.html' %}

{% block title %}{{ project.name }} - EasyTesting{% endblock %}

{% block header %}项目详情: {{ project.name }}{% endblock %}

{% block header_buttons %}
<div class="btn-group">
    <a href="{% url 'project_edit' pk=project.pk %}" class="btn btn-outline-secondary">
        <i class="bi bi-pencil"></i> 编辑
    </a>
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="bi bi-plus-lg"></i> 新增
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li>
            <a class="dropdown-item" href="{% url 'environment_create' %}?project={{ project.pk }}">
                <i class="bi bi-gear"></i> 环境
            </a>
        </li>
        <li>
            <a class="dropdown-item" href="{% url 'test_case_create' %}?project={{ project.pk }}">
                <i class="bi bi-file-earmark-code"></i> 测试用例
            </a>
        </li>
        <li>
            <a class="dropdown-item" href="{% url 'test_suite_create' %}?project={{ project.pk }}">
                <i class="bi bi-collection"></i> 测试套件
            </a>
        </li>
    </ul>
</div>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>项目详情</span>
                <a href="{% url 'project_edit' pk=project.pk %}" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-pencil"></i>
                </a>
            </div>
            <div class="card-body">
                <div class="mb-4">
                    <h5 class="text-muted mb-2">描述</h5>
                    <p>{{ project.description|default:"No description provided" }}</p>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <h5 class="text-muted mb-2">创建人</h5>
                        <div class="d-flex align-items-center">
                            <span class="avatar avatar-sm bg-primary rounded-circle me-2 d-flex align-items-center justify-content-center" style="width: 30px; height: 30px;">
                                {{ project.created_by.username|first|upper }}
                            </span>
                            <span>{{ project.created_by.username }}</span>
                        </div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <h5 class="text-muted mb-2">创建时间</h5>
                        <p class="mb-0">{{ project.created_at|date:"Y-m-d H:i" }}</p>
                    </div>

                    <div class="col-md-6">
                        <h5 class="text-muted mb-2">更新时间</h5>
                        <p class="mb-0">{{ project.updated_at|date:"Y-m-d H:i" }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>环境</span>
                <a href="{% url 'environment_create' %}?project={{ project.pk }}" class="btn btn-sm btn-primary">
                    <i class="bi bi-plus-lg"></i> 添加环境
                </a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>域名</th>
                                <th class="text-end">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for env in environments %}
                                <tr>
                                    <td>{{ env.name }}</td>
                                    <td>
                                        <code class="bg-light px-2 py-1 rounded">{{ env.base_url }}</code>
                                    </td>
                                    <td class="text-end">
                                        <a href="{% url 'environment_detail' pk=env.pk %}" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="3" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="bi bi-info-circle me-2"></i> 没有环境
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>测试用例</span>
                <a href="{% url 'test_case_create' %}?project={{ project.pk }}" class="btn btn-sm btn-primary">
                    <i class="bi bi-plus-lg"></i> 添加测试用例
                </a>
            </div>
            <div class="card-body">
                <!-- Test Case Groups Section -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="bi bi-folder me-2"></i> 测试用例分组
                        </h5>
                        <div>
                            <a href="{% url 'test_case_group_list' %}?project={{ project.id }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-folder2-open"></i> 查看测试用例分组
                            </a>
                            <a href="{% url 'test_case_group_create' %}?project={{ project.id }}" class="btn btn-sm btn-outline-success">
                                <i class="bi bi-folder-plus"></i> 新增测试用例分组
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        {% if test_case_groups %}
                            <div class="list-group">
                                {% for group in test_case_groups|slice:":5" %}
                                    <a href="{% url 'test_case_list' %}?project={{ project.id }}&group={{ group.id }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                        <div>
                                            <i class="bi bi-folder-fill text-warning me-2"></i>
                                            {{ group.name }}
                                            <span class="badge bg-light text-dark ms-2">{{ group.test_cases.count }} 测试用例</span>
                                        </div>
                                        <i class="bi bi-chevron-right"></i>
                                    </a>
                                {% endfor %}
                            </div>
                            {% if test_case_groups.count > 5 %}
                                <div class="text-center mt-3">
                                    <a href="{% url 'test_case_group_list' %}?project={{ project.id }}" class="btn btn-sm btn-outline-primary">
                                        查看全部测试用例分组
                                    </a>
                                </div>
                            {% endif %}
                        {% else %}
                            <div class="text-center py-3">
                                <p class="text-muted mb-0">暂时没有测试用例分组</p>
                                <a href="{% url 'test_case_group_create' %}?project={{ project.id }}" class="btn btn-sm btn-outline-primary mt-2">
                                    <i class="bi bi-folder-plus"></i> 新增测试用例分组
                                </a>
                            </div>
                        {% endif %}
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>用例名称</th>
                                <th>请求方法</th>
                                <th>URL</th>
                                <th class="text-end">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for test_case in test_cases %}
                                <tr>
                                    <td>{{ test_case.name }}</td>
                                    <td>
                                        <span class="badge
                                            {% if test_case.request_method == 'GET' %}bg-success{% endif %}
                                            {% if test_case.request_method == 'POST' %}bg-primary{% endif %}
                                            {% if test_case.request_method == 'PUT' %}bg-warning{% endif %}
                                            {% if test_case.request_method == 'DELETE' %}bg-danger{% endif %}
                                            {% if test_case.request_method == 'PATCH' %}bg-info{% endif %}
                                        ">
                                            {{ test_case.request_method }}
                                        </span>
                                    </td>
                                    <td>
                                        <code class="bg-light px-2 py-1 rounded text-truncate d-inline-block" style="max-width: 150px;">
                                            {{ test_case.request_url }}
                                        </code>
                                    </td>
                                    <td class="text-end">
                                        <a href="{% url 'test_case_detail' pk=test_case.pk %}" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="4" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="bi bi-info-circle me-2"></i> 暂时没有测试用例
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>测试套件</span>
                <a href="{% url 'test_suite_create' %}?project={{ project.pk }}" class="btn btn-sm btn-primary">
                    <i class="bi bi-plus-lg"></i> 新增测试套件
                </a>
            </div>
            <div class="card-body">
                <!-- Test Suite Groups Section -->
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="bi bi-folder me-2"></i> 测试套件分组
                        </h5>
                        <div>
                            <a href="{% url 'test_suite_group_list' %}?project={{ project.id }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-folder2-open"></i> 查看测试套件分组
                            </a>
                            <a href="{% url 'test_suite_group_create' %}?project={{ project.id }}" class="btn btn-sm btn-outline-success">
                                <i class="bi bi-folder-plus"></i> 新增测试套件分组
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        {% if test_suite_groups %}
                            <div class="list-group">
                                {% for group in test_suite_groups|slice:":5" %}
                                    <a href="{% url 'test_suite_list' %}?project={{ project.id }}&group={{ group.id }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                        <div>
                                            <i class="bi bi-folder-fill text-warning me-2"></i>
                                            {{ group.name }}
                                            <span class="badge bg-light text-dark ms-2">{{ group.test_suites.count }} 测试套件s</span>
                                        </div>
                                        <i class="bi bi-chevron-right"></i>
                                    </a>
                                {% endfor %}
                            </div>
                            {% if test_suite_groups.count > 5 %}
                                <div class="text-center mt-3">
                                    <a href="{% url 'test_suite_group_list' %}?project={{ project.id }}" class="btn btn-sm btn-outline-primary">
                                        查看全部测试套件分组
                                    </a>
                                </div>
                            {% endif %}
                        {% else %}
                            <div class="text-center py-3">
                                <p class="text-muted mb-0">暂时没有测试套件分组</p>
                                <a href="{% url 'test_suite_group_create' %}?project={{ project.id }}" class="btn btn-sm btn-outline-primary mt-2">
                                    <i class="bi bi-folder-plus"></i> 新增测试套件分组
                                </a>
                            </div>
                        {% endif %}
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>测试套件名称</th>
                                <th>描述</th>
                                <th class="text-end">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for test_suite in test_suites %}
                                <tr>
                                    <td>{{ test_suite.name }}</td>
                                    <td>{{ test_suite.description|truncatechars:30 }}</td>
                                    <td class="text-end">
                                        <a href="{% url 'test_suite_detail' pk=test_suite.pk %}" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="3" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="bi bi-info-circle me-2"></i> 暂时没有测试套件
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>最近测试运行</span>
                <a href="{% url 'test_run_list' %}?project={{ project.pk }}" class="btn btn-sm btn-outline-primary">
                    查看全部
                </a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>名称</th>
                                <th>环境</th>
                                <th>状态</th>
                                <th>开始时间</th>
                                <th>结束时间</th>
                                <th class="text-end">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for test_run in test_runs %}
                                <tr>
                                    <td>{{ test_run.name }}</td>
                                    <td>{{ test_run.environment.name }}</td>
                                    <td>
                                        {% if test_run.status == 'completed' %}
                                            <span class="badge bg-success">Completed</span>
                                        {% elif test_run.status == 'failed' %}
                                            <span class="badge bg-danger">Failed</span>
                                        {% elif test_run.status == 'running' %}
                                            <span class="badge bg-primary">Running</span>
                                        {% else %}
                                            <span class="badge bg-secondary">Pending</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ test_run.start_time|date:"Y-m-d H:i"|default:"-" }}</td>
                                    <td>{{ test_run.end_time|date:"Y-m-d H:i"|default:"-" }}</td>
                                    <td class="text-end">
                                        <a href="{% url 'test_run_detail' pk=test_run.pk %}" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="6" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="bi bi-info-circle me-2"></i> 暂时没有测试运行
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
